<template>
  <a-form ref="form" :model="formData" layout="vertical">
    <div class="form__box">
      <a-form-item :label="`数据绑定key`" field="dataIndex" >
        <template v-if="dataObj.mode === 'dataView'">
          <a-select v-model="formData.dataViewSel" allow-clear @change="changeDataViewSel">
            <a-option value="手填">手填</a-option>
            <a-option v-for="option in dataObj.queryGroupList" :key="option.groupId + ' ' + option.queryKey" :value="option.groupId + ' ' + option.queryKey" :disabled="dataObj.pageData.some(item => item.formData.dataIndex === option.groupId + ' ' + option.queryKey)" :title="(option.formName ? `${option.formName}_${option.columnName}` : option.columnName) + (option.aggregateId ?`（${option.funColumnAs}的函数条件）`:'')">{{ option.formName ? `${option.formName}_${option.columnName}` : option.columnName }}{{ option.aggregateId ?`（${option.funColumnAs}函数条件）`:'' }}</a-option>
          </a-select>
          <a-input v-model="formData.dataIndex" :disabled="formData.dataViewSel !=='手填'"></a-input>
        </template>
        <a-input v-else v-model="formData.dataIndex" :disabled="formData.notMod"></a-input>
        <field-linkage :formData="formData"></field-linkage>
      </a-form-item>
      <a-form-item :label="`字段名称`" field="name">
        <a-input v-model="formData.name"></a-input>
        <a-checkbox v-model="formData.hideTitle">隐藏标题</a-checkbox>
      </a-form-item>
      <a-form-item :label="`默认值`" field="defaultValue">
        <a-input v-model="formData.defaultValue"></a-input>
      </a-form-item>
      <a-form-item :label="`选择颜色`" field="color">
        <a-input type="color" v-model="formData.color"></a-input>
      </a-form-item>
      <a-form-item :label="`字体大小`" field="fontSize">
        <a-input type="number" v-model="formData.fontSize"></a-input>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="defaultValue">
        <a-input-number :step="1" :max="24" :min="1" v-model="formData.wrapperCol"></a-input-number>
      </a-form-item>
      <a-form-item :label="`文案位置`" field="textAlign">
        <a-radio-group v-model="formData.textAlign" type="button">
          <a-radio value="left">
            左对齐
          </a-radio>
          <a-radio value="center">
            居中
          </a-radio>
          <a-radio value="right">
            右对齐
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { basicDefaultData, dataTypeOptions } from './../base/options'
import FieldLinkage from '@/components/Form/base/fieldLinkage.vue'
export const defaultData = () => ({
  ...basicDefaultData(),
  type: 'divModel',
  name: '文字',
  defaultValue: '',
  color: 'black',
  fontSize: '14',
  textAlign: 'left',
  wrapperCol: 24
})
export default {
  name: 'DivModelInfo',
  components: { FieldLinkage },
  inject: ['dataObj'],
  data () {
    return {
      // rules: {
      //   dataIndex: [{ required: true, message: '必填' }]
      // },
      dataTypeOptions
    }
  },
  computed: {
    formData () {
      return this.dataObj.pageData[this.dataObj.selectIndex]?.formData || {}
    }
  },
  watch: {
    formData: {
      immediate: true,
      handler (newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData = defaultData()
        }
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="less">

</style>
